<template>
    <div class="search-content-div">
        <el-row type="flex" justify="center">
            <el-col :span="14">
                <el-row class="content-card">

                    <el-col :span="17">

                        <el-card   :body-style="{ padding: '0px'}">
                            <div slot="header" class="clearfix">
                                <span>找到{{total}}条符合</span>
                                <span class="keyword">{{searchkeyword}}</span>
                                <span>条件的作品</span>
                            </div>

                            <el-row v-for="(book ,key) in list" :key="key" class="individual-result">


                                <el-col :span="5" class="book-img-column">
                                    <el-image  style="cursor: pointer" class="user-profile" :src="book.coverPicUrl" @click="GoToDetail(book)">
                                    </el-image>
                                </el-col>

                                <el-col :span="19">
                                    <el-row class="search-book-title">
                                        <el-col :span="15"><span @click="GoToDetail(book)" style="cursor: pointer" >{{book.bookName}} <!--{{book.bookId}}作为检验--></span></el-col>
                                    </el-row>
                                    <el-row>
                                        <span class="content-text">作者:{{book.author}}</span>
                                    </el-row>
                                    <el-row class="content-text-row">
                                        <span class="search-book-content">{{book.content}}</span>
                                    </el-row>
                                </el-col>
                            </el-row>

                            <el-row class="paging">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                               :current-page="currentPage"  :page-size="pageSize"
                                               layout="total, prev, pager, next" :total="total">
                                </el-pagination>
                            </el-row>

                        </el-card>
                    </el-col>

                    <el-col :span="1" class="cus-gutter"></el-col>

                    <el-col :span="6" class="rank-col">
                        <el-card :body-style="{padding: '0px'}" class="rank-card">
                            <div slot="header" class="clearfix">
                                <span>搜索排行</span>
                            </div>

                            <el-row v-for="(book,key) in SearchRankBookList" :key="key" class="rank-row">
                               <el-col :span="10">
                                <el-link :underline="false" :title="book.title">
                                    <el-image :src="book.url"></el-image>
                                </el-link>
                               </el-col>

                                <el-col :span="12">
                                    <el-row class="book-title">
                                        <span >{{book.title}}</span>
                                    </el-row>

                                        <el-row class="content-text"><span>作者：{{book.author}}</span></el-row>
                                        <el-row class="content-text"><span>字数：{{book.words}}</span></el-row>
                                </el-col>
                            </el-row>


                        </el-card>
                    </el-col>

                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    import VueEvent from "../../model/VueEvent";


    export default {
        name: "SearchContent",
        data(){
            return {
                list: [],
                data: [],
                pageSize: 8,
                total: null,
                currentPage: 1,
                searchkeyword: "",

                SearchResultBookList:[
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/81pZB30%2BSCL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "再见，吾爱",
                        author: "雷蒙德·钱德勒",
                        words: "20万",
                        content: "读了《再见，吾爱》才发现，有些人你就是戒不掉，有些事你就是妥协不了！"
                    },
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/71k2fG9T4FL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "人性的枷锁",
                        author: "毛姆",
                        words: "20万",
                        content: "“故事圣手”“天才小说家”毛姆长篇代表作，一本解答人生奥义的希望之书"
                    },
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/51uU6L%2BrfpL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "怒",
                        author: "吉田修一",
                        words: "20万",
                        content: "日本重量级芥川奖作家吉田修一，《恶人》之后又一新作，比《白夜行》更凄美，比《告白》更深刻，照见都市人无处遁形的孤独"
                    },
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/51sDzGa%2BpfL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "醉步男",
                        author: "小林泰三",
                        words: "20万",
                        content: "世界科幻文学至高代表作，日本狂销23年，终于引进正版！同时收录恐怖小说名篇《玩具修理者》"
                    }
                ],
                SearchRankBookList: [
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/81pZB30%2BSCL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "再见，吾爱",
                        author: "雷蒙德·钱德勒",
                        words: "20万",
                        content: "读了《再见，吾爱》才发现，有些人你就是戒不掉，有些事你就是妥协不了！"
                    },
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/71k2fG9T4FL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "人性的枷锁",
                        author: "毛姆",
                        words: "20万",
                        content: "“故事圣手”“天才小说家”毛姆长篇代表作，一本解答人生奥义的希望之书"
                    },
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/51uU6L%2BrfpL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "怒",
                        author: "吉田修一",
                        words: "20万",
                        content: "日本重量级芥川奖作家吉田修一，《恶人》之后又一新作，比《白夜行》更凄美，比《告白》更深刻，照见都市人无处遁形的孤独"
                    },
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/51sDzGa%2BpfL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "醉步男",
                        author: "小林泰三",
                        words: "20万",
                        content: "世界科幻文学至高代表作，日本狂销23年，终于引进正版！同时收录恐怖小说名篇《玩具修理者》"
                    }
                ]
            }
        },

        mounted() {
            var vm = this;

            VueEvent.$on('transmit-keyword',function (data) {

                //接受来自Search组件的keyword值
                vm.searchkeyword = data;
                vm.currentPage=1;
                console.log(vm.searchkeyword);
                vm.pageList();
                console.log("建立出始表");
                /*vm.search();
                console.log("查找");*/
            })
            //console.log(this.$store.state.navSearchParam);
        },
        computed:{
          resultHeight: function () {
                if(this.currentPage===this.total)  return ((this.list.length % 4) * 200 +300) + 'px';

                else return 1100 + 'px';
          }
        },
        methods: {
            pageList() {
                // 发请求拿到数据并暂存全部数据,方便之后操作

                //添加的接口
                this.axios.post(
                    '/searchBooksByPage',
                    {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        searchParam: {
                            bookName: this.searchkeyword
                        }
                    }).then(response => {
                        if(response.data.success)
                        {
                            this.list=response.data.data.records;
                            this.total=response.data.data.total;
                            console.log(response.data.data.records);
                        }else{
                            console.log("failed to get");
                        }
                }).catch(error  => {

                });

            },
            // 当每页数量改变 没有设置可以选择每页显示几条内容的功能
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val
                //this.getList()
            },
            // 当当前页改变
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;

                this.axios.post(
                    '/searchBooksByPage',
                    {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        searchParam: {
                            bookName: this.searchkeyword
                        }
                    }).then(response => {
                    if(response.data.success)
                    {
                        this.list=response.data.data.records;
                        this.total=response.data.data.total;
                        console.log(response.data.data.records);
                    }else{
                        console.log("failed to get");
                    }
                }).catch(error  => {

                });
            },
            GoToDetail:function (book) {
                //将书籍信息放入路由的参数中
                this.$router.push({name: "detail", params: {bookInfo: book}});
                // this.$nextTick(function () {
                //     VueEvent.$emit('transmitbookinfo',book);
                // })
            }
        },
        // beforeDestroy() {
        //     VueEvent.$emit('transmit-bookinfo',id);
        // }
    }
</script>

<style scoped>

    a {
        color:black;
        text-decoraction: none;
    }

    .search-content-div{
        height: 100%;
        background: #f0f0f0;
    }

    .content-card{
        height: 1000px;
        margin-top: 40px;
    }

    .cus-gutter{
        height: 800px;
    }



    .rank-card{
        height: 800px;
    }

    .keyword{
        color: #409eff;
        margin: 0 5px;
    }

    .content-text{
        color:#9e9e9e;
        font-size: 16px;
        word-break: break-all;
        margin-bottom: 5px;
    }

    .search-book-content{
        color:black;
        font-size: 16px;
        word-break: break-all;
        margin-bottom: 5px;
    }

    .content-text-row{
        padding-top: 30px;
        margin-bottom: 13px;
        overflow: hidden;
        width: 610px;
    }

    .rank-row{
        margin-top: 30px;
    }

    .book-title{
        font-size: 18px;
        margin: 0 0 5px 0;
    }

    .search-book-title{
        font-size: 20px;
        margin: 20px 0 15px 0;
    }

    .book-img-column{
        text-align: center;
        margin: 20px 0;
    }

    .individual-result{
        border-bottom: 1px solid #f0f0f0;
        padding: 4px;
    }

    .paging{
        height: 30px;
        text-align: center;
        padding: 30px;
        margin-bottom: 30px;
    }

</style>